<template>
  <div id="solution">
    <div class="item one"></div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
  </div>
</template>
<script>
import { onMounted } from "vue";

export default {
  name: "SoluTion",
  components: {},
  setup() {
    onMounted(() => {
      // 获取元素item，给元素添加hover事件
      const Items = document.querySelectorAll("#solution .item");
      Items[0].style.flexGrow = 3;
      Items[0].style.backgroundSize = "100% 100%";
      Items.forEach((item) => {
        item.addEventListener("mouseenter", () => {
          Items.forEach((i) => {
            i.style.width = "11.11%";
            i.style.flexGrow = 0;
            i.style.backgroundSize = "300% 100%";
          });
          item.style.flexGrow = 3;
          item.style.backgroundSize = "100% 100%";
        });
      });
    });
  },
};
</script>
<style lang="scss" scoped>
#solution {
  display: flex;
  width: 100%;
  height: 800px;
  background-color: aqua;
  margin-top: 60px;
  .item {
    width: 11.11%;
    height: 100%;
    transition: 0.5s;
    border: 1px solid red;
    box-sizing: border-box;
  }
  .one {
    background: url("../../../imgs/dl.jpg") no-repeat;
  }
}
</style>
